// 静态属性，样式属性，剥离数据 多种屏幕尺寸都事先部署好

const staticOption = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  title: {
    left: 'center',
    text: '',
    top: '5%',
    textStyle: {
      color: '#d9e7ff',
      fontSize: 24,
      fontWeight: 'normal'
    }
  },
  angleAxis: {
    type: 'category',
    data: [],
    z: 10,
    axisLabel: {
      color: '#bad3ff',
      fontSize: 22,
      interval: 0
    },
    axisLine: {
      lineStyle: {
        color: '#05388f'
      }
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: '#05388f'
      }
    },
    axisTick: {
      show: false
    }
  },
  radiusAxis: {
    axisLine: {
      show: false,
      lineStyle: {
        color: '#05388f'
      }
    },
    axisLabel: {
      show: false
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: '#05388f'
      }
    }
  },
  polar: {
    radius: '60%'
  },
  series: [{
    type: 'bar',
    data: [],
    coordinateSystem: 'polar',
    name: '增长情况'
  }]
}

const staticOptionMid = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  title: {
    left: 'center',
    text: '',
    top: '5%',
    textStyle: {
      color: '#d9e7ff',
      fontSize: 18,
      fontWeight: 'normal'
    }
  },
  angleAxis: {
    type: 'category',
    data: [],
    z: 10,
    axisLabel: {
      color: '#bad3ff',
      fontSize: 16,
      interval: 0
    },
    axisLine: {
      lineStyle: {
        color: '#05388f'
      }
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: '#05388f'
      }
    },
    axisTick: {
      show: false
    }
  },
  radiusAxis: {
    axisLine: {
      show: false,
      lineStyle: {
        color: '#05388f'
      }
    },
    axisLabel: {
      show: false
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: '#05388f'
      }
    }
  },
  polar: {
    radius: '60%'
  },
  series: [{
    type: 'bar',
    data: [],
    coordinateSystem: 'polar',
    name: '增长情况'
  }]
}

// 备选颜色，有需求则进行循环
const colors = ['#30a0d1', '#2ac2e2', '#9ee2bd', '#ffdd89', '#ffa286', '#fb6c84', '#ee7eb2',
  '#e5beeb', '#7574ee', '#0069df']
let colorIndex = 0

// 获取设备宽度
const screen = window.screen.width

class ChartFactory {
  constructor (additionalOptions) {
    // 根据屏幕宽度获取不同配置的echarts配置
    this.option = staticOption
    if (screen <= 1600) {
      this.option = staticOptionMid
    }
    // 下方复制属于浅拷贝，指向同个内存，针对可能有更改的需求，要进行一次清理
    // this.clear()
    colorIndex = 0
    // 装配数据 必须使用箭头函数
    this.option.title.text = additionalOptions.title
    this.option.angleAxis.data = additionalOptions.angleAxis
    additionalOptions.seriesData.forEach((p1) => {
      this.option.series[0].data.push({
        value: p1,
        itemStyle: {
          color: colors[colorIndex]
        }
      })
      if (colorIndex >= additionalOptions.seriesData.length - 1) {
        colorIndex = 0
      } else {
        colorIndex += 1
      }
    })
  }

  // 清理方法，要将部署的新数据全部置空
  clear () {
    this.option.series[0].data = []
    this.option.series[1].data = []
  }

  getOption () {
    return this.option
  }
}

export { ChartFactory }
